<?php defined('IN_IA') or exit('Access Denied');?><?php (!empty($this) && $this instanceof WeModuleSite || 1) ? (include $this->template('common/header', TEMPLATE_INCLUDEPATH)) : (include template('common/header', TEMPLATE_INCLUDEPATH));?>
<?php  echo $this -> set_tabbar($action, $storeid);?>
<?php  if($operation == 'display') { ?>
<div class="main">
    <style>
        .form-control-excel {
            height: 34px;
            padding: 6px 12px;
            font-size: 14px;
            line-height: 1.42857143;
            color: #555;
            background-color: #fff;
            background-image: none;
            border: 1px solid #ccc;
            border-radius: 4px;
            -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
            box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
            -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
            -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
            transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
        }
        .header {
            line-height: 28px;
            margin-bottom: 16px;
            margin-top: 18px;
            padding-bottom: 4px;
            border-bottom: 1px solid #CCC
        }
        .block-gray{
            background-color: #555555;
            color: white;
        }
        .block-red{
            background-color: #ef4437;
            color: white;
        }
        .block-primary{
            background-color: #428bca;
            color: white;
        }
        .block-success{
            background-color: #5cb85c;
            color: white;
        }
        .block-orange{
            background-color: orange;
            color: white;
        }
        #guest-queue-index-body .queue_setting, #queue-setting-index-body .queue_setting {
            display: block;
            float: left;
            height: 100px;
            width: 31.3%;
            margin-right: 2%;
            margin-bottom: 20px;
            text-align: center
        }
        #queue-setting-index-body .queue_setting {
            width: 150px;
            height: 150px;
            border-radius: 1000px;
            margin-right: 20px
        }
        #guest-queue-index-body .queue_setting .name, #queue-setting-index-body .queue_setting .name{
            display: table-cell;
            font-size: 20px;
            font-weight: bold;
            line-height: 30px;
            vertical-align: middle;
            height: 60px
        }
        #queue-setting-index-body .queue_setting .name {
            height: 90px;
        }
        .table-display{
            display: table;
            width: 100%;
        }
        .table-state-tables{
            padding: 10px;
        }
        .table-state-tables .state-table{
            margin: 0 20px 20px 0;
            font-size: 20px;
            line-height: 30px;
            width: 140px;
            float: left
        }
        .table-state-tables .state-table .round{
            display: table;
            margin: 20px;
            width: 100px;
            height: 100px;
            border-radius: 1000px;
        }
        .table-state-tables .state-table .round.idle{
            background-color: #555555;
            color: white
        }
        .table-state-tables .state-table .state{
            height: 100px;
            width: 100%;
            display: table-cell;
            text-align: center;
            vertical-align: middle
        }
        .table-state-tables .state-table .name{
            background-color: #eeeeee;
            color: #555555;
            font-size: 16px;
            line-height: 40px;
            text-align: center
        }
        .table-state-tables .state-table .round.opened{
            background-color: #ef4437;
            color: white;
        }
        .table-state-tables .state-table .round.ordered{
            background-color: #428bca;
            color: white
        }
        .table-state-tables .state-table .round.paid{
            background-color: #5cb85c;
            color: white
        }

        .qr-code-table .qr-code-item {
            float: left;
            width: 200px;
            margin: 0px 20px 20px 0;
            text-align: center;
            color: #555555
        }
        .qr-code-table .qr-code-op{
            height: 24px;
            line-height: 24px;
            font-size: 16px;
            text-align: left;
            visibility: visible
        }

        /*.qr-code-table .qr-code-item a{*/
        /*color: #555555;*/
        /*text-decoration: none*/
        /*}*/
        .qr-code-table .qr-code-item a{
            color: #555555;
            text-decoration: none;
        }
        .qr-code-table .qr-code-op .fa-edit{
            color: #5cb85c
        }
        .qr-code-table .qr-code-op .fa-trash-o{
            color: #d9534f
        }
        .qr-code-table .qr-code-box{
            border: 1px solid #dbdbdb
        }
        .qr-code-table .qr-code-item-info{
            background-color: #eeeeee;
            border-top: 1px solid #dbdbdb;
            height: 24px
        }

    </style>
    <div class="panel panel-default">
        <div class="panel-body">
            <div class="header">
                <h3>预订开放时间段 列表</h3>
            </div>
            <div class="form-group">
                <a class="btn btn-primary btn-sm" href="<?php  echo $this->createWebUrl('reservation', array('op' => 'post', 'storeid' => $storeid))?>">新建 预订开放时间段</a>
                <a class="btn btn-success btn-sm" href="<?php  echo $this->createWebUrl('reservation', array('op' => 'batch', 'storeid' => $storeid))?>">批量新建</a>
            </div>
            <form action="" method="post" class="form-horizontal form" enctype="multipart/form-data">
                <table class="table table-hover">
                    <thead class="navbar-inner">
                    <tr>
                        <th style="width:35%;">桌台区域或类型</th>
                        <th style="width:35%;">开放时间点</th>
                        <th style="width:30%;text-align: center;">操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    <?php  if(is_array($list)) { foreach($list as $item) { ?>
                    <tr>
                        <td>
                            <?php  echo $tablezones[$item['tablezonesid']]['title'];?>
                        </td>
                        <td>
                            <?php  echo $item['time'];?>
                        </td>
                        <td style="max-width:70px;text-align: center;">
                            <a class="btn btn-default btn-sm" href="<?php  echo $this->createWebUrl('reservation', array('id' => $item['id'], 'storeid' => $storeid, 'op' => 'post'))?>" title="编辑">编辑</a>
                            <a class="btn btn-danger btn-sm" href="<?php  echo $this->createWebUrl('reservation', array('id' => $item['id'], 'storeid' => $storeid, 'op' => 'delete'))?>" onclick="return confirm('确认操作吗？');return false;" title="删除">删除</a>
                        </td>
                    </tr>
                    <?php  } } ?>
                    </tbody>
                    <tfoot>
                    </tfoot>
                </table>
            </form>
            <?php  echo $pager;?>
        </div>
    </div>

</div>
<?php  } else if($operation == 'post') { ?>
<link rel="stylesheet" type="text/css" href="../addons/smart_ct/plugin/clockpicker/clockpicker.css" media="all">
<script type="text/javascript" src="../addons/smart_ct/plugin/clockpicker/clockpicker.js"></script>
<link rel="stylesheet" type="text/css" href="../addons/smart_ct/plugin/clockpicker/standalone.css" media="all">
<script>
    $(function(){
        $('.clockpicker').clockpicker();
    })
</script>
<div class="main">
    <form action="" method="post" class="form-horizontal form" enctype="multipart/form-data">
        <input type="hidden" name="storeid" value="<?php  echo $storeid;?>" />
        <input type="hidden" name="id" value="<?php  echo $item['id'];?>" />
        <div class="panel panel-default">
            <div class="panel-heading">
                预订开放时间段 详情
            </div>
            <div class="panel-body">
                <div class="form-group">
                    <label class="col-xs-12 col-sm-3 col-md-2 control-label">开放时间点</label>
                    <div class="col-sm-3">
                        <div class="input-group clockpicker">
                            <input type="text" class="form-control" value="<?php  if(empty($item['time'])) { ?>09:00<?php  } else { ?><?php  echo $item['time'];?><?php  } ?>" name="time">
                            <span class="input-group-addon"><span class="glyphicon glyphicon-time"></span></span>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-xs-12 col-sm-3 col-md-2 control-label">桌台区域或类型</label>
                    <div class="col-sm-9">
                        <select class="form-control" style="margin-right:15px;" name="tablezonesid" autocomplete="off" class="form-control">
                            <?php  if(is_array($tablezones)) { foreach($tablezones as $row) { ?>
                            <option value="<?php  echo $row['id'];?>" <?php  if($row['id'] == $item['tablezonesid']) { ?> selected="selected"<?php  } ?>><?php  echo $row['title'];?></option>
                            <?php  } } ?>
                        </select>
                    </div>
                </div>
            </div>
        </div>
        <div class="form-group col-sm-12">
            <input type="submit" name="submit" value="保存设置" class="btn btn-primary col-lg-1" />
            <input type="hidden" name="token" value="<?php  echo $_W['token'];?>" />
        </div>
    </form>
</div>
<?php  } else if($operation == 'batch') { ?>
<link rel="stylesheet" type="text/css" href="../addons/smart_ct/plugin/clockpicker/clockpicker.css" media="all">
<script type="text/javascript" src="../addons/smart_ct/plugin/clockpicker/clockpicker.js"></script>
<link rel="stylesheet" type="text/css" href="../addons/smart_ct/plugin/clockpicker/standalone.css" media="all">
<script>
    $(function(){
        $('.clockpicker').clockpicker();
    })
</script>
<div class="main">
    <div class="alert alert-info">
        <strong>温馨提示：</strong>
        <p>
            系统会根据您填写的起始时间点，和创建间隔, 批量创建预订时间点。
            <br>
            例如： 想要在 18:00 开始预订， 每隔30分钟创建一个预订时间点， 创建4个预订时间点。
            <br>
            系统会创建: 18:00, 18:30, 19:00, 19:30 共4个时间点
        </p>
    </div>
    <form action="" method="post" class="form-horizontal form" enctype="multipart/form-data">
        <input type="hidden" name="storeid" value="<?php  echo $storeid;?>" />
        <input type="hidden" name="id" value="<?php  echo $item['id'];?>" />
        <div class="panel panel-default">
            <div class="panel-heading">
                批量创建预订时间点
            </div>
            <div class="panel-body">
                <div class="form-group">
                    <label class="col-xs-12 col-sm-3 col-md-2 control-label">桌台区域或类型</label>
                    <div class="col-sm-9">
                        <select class="form-control" style="margin-right:15px;" name="tablezonesid" autocomplete="off" class="form-control">
                            <?php  if(is_array($tablezones)) { foreach($tablezones as $row) { ?>
                            <option value="<?php  echo $row['id'];?>" <?php  if($row['id'] == $item['tablezonesid']) { ?> selected="selected"<?php  } ?>><?php  echo $row['title'];?></option>
                            <?php  } } ?>
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-xs-12 col-sm-3 col-md-2 control-label">开放时间点</label>
                    <div class="col-sm-3">
                        <div class="input-group clockpicker">
                            <input type="text" class="form-control" value="09:00" name="time">
                            <span class="input-group-addon"><span class="glyphicon glyphicon-time"></span></span>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-xs-12 col-sm-3 col-md-2 control-label">创建间隔(单位： 分钟)</label>
                    <div class="col-sm-9">
                        <input type="number" name="time_point" class="form-control" value="30" placeholder=""/>
                        <span class="help-block">
                            例如每30分钟设立一个预订时间点： 30
                        </span>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-xs-12 col-sm-3 col-md-2 control-label">创建数量</label>
                    <div class="col-sm-9">
                        <input type="number" name="time_count" class="form-control" value="1" placeholder=""/>
                        <span class="help-block">
                            一次最多创建15个预订时间点
                        </span>
                    </div>
                </div>

            </div>
        </div>
        <div class="form-group col-sm-12">
            <input type="submit" name="submit" value="保存设置" class="btn btn-primary col-lg-1" />
            <input type="hidden" name="token" value="<?php  echo $_W['token'];?>" />
        </div>
    </form>

</div>
<?php  } ?>
<?php (!empty($this) && $this instanceof WeModuleSite || 1) ? (include $this->template('common/footer', TEMPLATE_INCLUDEPATH)) : (include template('common/footer', TEMPLATE_INCLUDEPATH));?>